<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 15:34:24
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-11-27 20:06:34
-->
<template>
  <div class="inputData">
    <p style="color: red; font-size: 20px">
      1.选中城市
      <br />
      2.录入数据
      <br />
      疫情终会过去，春天终会来临
    </p>
    <br />
    <el-form :model="hosForm" ref="hosForm" label-width="100px">
      <el-form-item label="省市区选择" prop="pca">
        <!-- 使用级联选择器加载对应的数据源 进行一个选择 -->
        <el-cascader
          v-model="hosForm.pca"
          :props="{ label: 'name', value: 'name' }"
          :options="pca"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="确诊" prop="confirmed">
        <el-col :span="8">
          <el-input v-model="hosForm.confirmed"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="疑似" prop="suspected">
        <el-col :span="8">
          <el-input v-model="hosForm.suspected"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="死亡" prop="dead">
        <el-col :span="8">
          <el-input v-model="hosForm.dead"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="治愈" prop="cure">
        <el-col :span="8">
          <el-input v-model="hosForm.cure"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="重症" prop="severe">
        <el-col :span="8">
          <el-input v-model="hosForm.severe"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="境外输入" prop="outside">
        <el-col :span="8">
          <el-input v-model="hosForm.outside"></el-input>
        </el-col>
      </el-form-item>

      <el-button
        type="primary"
        style="margin-left: 50px"
        @click="submitHandler('hosForm')"
        >提交</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import pca from "@/assets/pca.json";
export default {
  data() {
    return {
      pca,
      hosForm: {},
    };
  },
  methods: {
    submitHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过表单验证之后 在这个代码块中继续编写接下来的逻辑处理
          // 设置参数
          let data = { ...this.hosForm };
          data.country = "中国";
          // 设置省份参数
          data.province = data.pca[0];
          // 设置城市参数
          data.city = data.pca[1];
          // 设置区的参数
          data.area = data.pca[2];
          console.log(data);
          // 将pca数据在data中删除掉
          delete data.pca;
          // 发送网络请求
          post("/epidemic/saveOrUpdate", data).then((res) => {
            // 添加一个成功的提示
            this.$message({
              message: res.message,
              type: "success",
            });
            this.$router.push({
              path: "/data/List",
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
